<template>
  <div class="ChangePassword">
    <el-input v-model="oldPassword" placeholder="输入旧密码" show-password></el-input>
    <el-input v-model="NewPassword" placeholder="输入新密码" show-password></el-input>
    <el-input v-model="NewPassword2" placeholder="确认密码" show-password></el-input>
    <el-button type="primary" @click="post" :loading="!flag">提交</el-button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name:'ChangePassword',
    data() {
      return {
        oldPassword: '',
        NewPassword: '',
        NewPassword2: '',
        flag:true
      };
    },
    methods:{
      post(){
        if (this.NewPassword === "") {
          this.$message({
            message: "密码不能为空",
            type: "warning",
          });
          return;
        } else if (this.NewPassword.length < 6 || this.NewPassword.length > 18) {
          this.$message({
            message: "密码长度需在6-18位之间",
            type: "warning",
          });
          return;
        }else if(this.NewPassword !== this.NewPassword2){
          this.$message({
            message:'两次密码不一致',
            type:'warning'
          })
          return;
        }
        if(this.flag){
          this.flag = false
          this.$store.dispatch('personalCenter/reqSendPassword', this.oldPassword).then((result)=>{
            if(result.data.status == '200'){
              this.$store.dispatch('personalCenter/reqChangePassword', this.NewPassword).then((result)=>{
                if(result.data.status == '200'){
                  this.$message({
                    message:'修改密码成功',
                    type:'success'
                  })
                  this.flag = true
                }else{
                  this.$message({
                    message:'服务器错误',
                    type:'error'
                  })
                  this.flag = true
                }
              })
            }else if(result.data.status == '201'){
              this.$message({
                message:'旧密码不正确',
                type:'warning'
              })
              this.flag = true
            }else{
              this.$message({
                message:'服务器错误',
                type:'error'
              })
              this.flag = true
            }
          });
        }
      }
    },

}
</script>

<style lang="less">
  .ChangePassword{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-input{
      width: 300px;
      margin: 20px 0;
      input{
        &::placeholder{
          color: rgb(102, 95, 95);
        }
      }
    }
    .el-button{
      span{
        font-family: 'FZZYJT';
      }
    }
  }
</style>